<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import CancelDetailModal from './CancelDetailModal.vue'
import CancelVerifyModal from './CancelVerifyModal.vue'
import { useDictFilterOptions } from '@/hooks'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import type { ClassChangeApi } from '@/apis'
import { formatMoney } from '@/utils/common'

const props = defineProps<{
  records: any[]
  loading: boolean
  pagination: any
  form: ClassChangeApi.ClassCancelQuery
}>()

const emit = defineEmits(['update:form', 'refresh'])
const formData = useVModel(props, 'form', emit, { eventName: 'update:form' })

// 筛选
const onFilterChange = (dataIndex, filteredValues) => {
  formData.value[dataIndex] = filteredValues
}

const columns: TableInstanceColumns[] = [
  { title: 'id', slotName: 'id', align: 'center', fixed: 'left', width: 180 },
  { title: '学生', slotName: 'studentName', dataIndex: 'studentName', fixed: 'left',  width: 180 },
  { title: '退课班级', dataIndex: 'originalClassName', slotName: 'originalClassName', align: 'center', width: 360 },
  { title: '退课课次', dataIndex: 'originalLessonIndexes', slotName: 'originalLessonIndexes', align: 'center', width: 100 },
  { title: '退费金额', dataIndex: 'refundPrice', slotName: 'refundPrice', align: 'center', width: 100 },
  { title: '校区', dataIndex: 'campusName', slotName: 'campusName', align: 'center', width: 120 },
  { title: '申请方式', dataIndex: 'operateSource', slotName: 'operateSource', align: 'center', width: 110, filterable: {
    filters: useDictFilterOptions('OperateSourceEnum'),
  } },
  { title: '状态', dataIndex: 'operateStatus', slotName: 'operateStatus', align: 'center', width: 170, filterable: {
    filters: useDictFilterOptions('OperateStatusEnum'),
  } },
  { title: '操作', slotName: 'action', width: 100, fixed: 'right' },
]

const CancelDetailModalRef = ref<InstanceType<typeof CancelDetailModal>>()
const onDetail = (row) => {
  CancelDetailModalRef.value?.open(row.id)
}

const CancelVerifyModalRef = ref<InstanceType<typeof CancelVerifyModal>>()
const onVerify = (row) => {
  CancelVerifyModalRef.value?.open(row)
}

const onRefresh = () => {
  emit('refresh')
}
</script>

<template>
  <ProTable
    :data="records"
    :columns="columns"
    :loading="loading"
    :pagination="pagination"
    @refresh="onRefresh"
    @filter-change="onFilterChange"
  >
    <template #toolbar-left>
      <a-radio-group v-model="formData.changeType" type="button">
        <a-radio value="CANCEL_CLASS">
          退班
        </a-radio>
        <a-radio value="CANCEL_LESSON">
          退课
        </a-radio>
      </a-radio-group>
    </template>
    <template #id="{ record }">
      <a-link @click="onDetail(record)">
        <span class="text-13px"> {{ record.id }}</span>
      </a-link>
    </template>
    <template #studentName="{ record }">
      <CellStudent :id="record.student.id" :name="record.student.name" :gender="record.student.gender" :phone="record.student.parentPhone"/>
    </template>
    <template #originalClassName="{ record }">
      <CellClassInfo :id="record.originalClassId" :name="record.originalClassName" :lead-teacher-name="record.originalLeadTeacherName" />
    </template>
    <template #originalLessonIndexes="{ record }">
      <a-trigger position="top" auto-fit-position>
        <a-typography-text type="primary" class="cursor-pointer">
          {{ record.originalLessonIndexes.length }}节
        </a-typography-text>
        <template #content>
          <div class="tooltip-content">
            第{{ record.originalLessonIndexes.join('、') }}节课
          </div>
        </template>
      </a-trigger>
    </template>
    <template #refundPrice="{ record }">
      {{ formatMoney(record.refund.refundPrice) }}
    </template>
    <template #operateSource="{ record }">
      <CellDict code="OperateSourceEnum" :value="record.operateSource" :tag="false" />
    </template>
    <template #operateStatus="{ record }">
      <a-space align="center" direction="vertical" size="mini">
        <CellDict code="OperateStatusEnum" :value="record.operateStatus" />
        <div class="text-13px text-gray">
          {{ record.createTime }}
        </div>
      </a-space>
    </template>
    <template #action="{ record }">
      <a-link v-permission="['edu:class-cancel:verify']" :disabled="record?.operateStatus !== 'VERIFYING'" @click="onVerify(record)">
        审核
      </a-link>
    </template>
  </ProTable>
  <CancelDetailModal ref="CancelDetailModalRef" />
  <CancelVerifyModal ref="CancelVerifyModalRef" @success="emit('refresh')" />
</template>

<style lang="less" scoped>
.tooltip-content {
  padding: 10px;
  background-color: var(--color-bg-popup);
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}
</style>
